import React, { Component } from "react";
import { Image } from "antd-mobile";
import { GoodFavList } from "../../api/collection";
import { ShopcartList } from "../../api/cart"
import {
    BankcardOutline,
    GiftOutline,
    TruckOutline,
    FillinOutline,
} from "antd-mobile-icons";
import { List } from "antd-mobile";

import "../../styles/mine/Mine.css";

class Mine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num1: 0,
            num2: 0,
        };
    }


    exit() {
        if (localStorage.getItem("token")) {
            localStorage.removeItem("token");
            localStorage.removeItem("userid");
            this.props.history.push("/index/home");
        } else {
            this.props.history.push("/login");
        }

    }


    gocollection() {
        this.props.history.push("/mycollection");
    }
    gocart() {
        this.props.history.push("/index/cart")
    }

    componentDidMount() {
        if (localStorage.getItem("token")) {
            // 获取收藏列表
            GoodFavList({ userid: localStorage.getItem("userid") }).then((res) => {
                this.setState({ num1: res.data.list.length });
            });
            // 获取购物车列表
            ShopcartList({ userid: localStorage.getItem("userid") }).then((res) => {
                this.setState({ num2: res.data.list.length });
            });
        }


    }
    render() {
        return (
            <div className="mine">
                <div className="backgroundimg">
                    <div className="img">
                        <Image
                            src={localStorage.getItem("token") ? "https://img2.baidu.com/it/u=2212383468,857153027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" : ""}
                            width={64}
                            height={64}
                            fit="cover"
                            style={{ borderRadius: 32 }}
                        />
                    </div>
                    <ul>
                        <li
                            onClick={() => {
                                this.gocollection();
                            }}
                        >
                            <span className="num">{this.state.num1}</span>
                            <span>收藏</span>
                        </li>
                        <li
                            onClick={() => {
                                this.gocart();
                            }}
                        >
                            <span className="num">{this.state.num2}</span>
                            <span>购物车</span>
                        </li>
                        <li>
                            <span className="num">0</span>
                            <span>优惠券</span>
                        </li>
                    </ul>
                    <div className="list">
                        <h2>
                            <p>我的订单 </p>
                            <span>查看全部订单 &gt; </span>
                        </h2>
                        <ul>
                            <li>
                                <BankcardOutline fontSize={26} />
                                <span>待付款</span>
                            </li>
                            <li>
                                <GiftOutline fontSize={26} />
                                <span>待发货</span>
                            </li>
                            <li>
                                <TruckOutline fontSize={26} />
                                <span>已发货</span>
                            </li>
                            <li>
                                <FillinOutline fontSize={26} />
                                <span>待评价</span>
                            </li>
                        </ul>
                    </div>
                    <List.Item className="list-item hy">会员中心</List.Item>
                    <List.Item className="list-item shang">领劵中心</List.Item>
                    <List.Item className="list-item">我的评价</List.Item>
                    <List.Item className="list-item">收货地址</List.Item>
                    <List.Item className="list-item">我的客服</List.Item>
                    <List.Item
                        className="xia"
                        onClick={() => {
                            this.exit();
                        }}
                    >
                        {localStorage.getItem("token") ? "退出登录" : "去登录"}
                    </List.Item>
                </div>
            </div>
        );
    }
}

export default Mine;
